<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>绑定的终端信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,user-scalable=0">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	   <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- 可选的Bootstrap主题文件（一般不使用） -->
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  
  <!-- AngularJs框架 -->
  <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  </head>
  
  
  <body>
  <s:property value="nickname"/>,您好,以下是您绑定的终端信息：<br><br>
  <div id="panel">
  </div>
  
  <div ng-app="">
  	<p>姓名：<input type="tel" ng-model="name"></p>
  	<p ng-bind="name"></p>
  </div>
 <!--   openid：<s:property value="openid"/> <br> <c:forEach var="terminal" items="${terminals}">
     	   	<div id="bindinfo"class="panel panel-info">
	  			<div class="panel-heading"> 终端信息</div>
	  				<ul class="list-group">
	  					<li class="list-group-item"> 终端编号：${terminal.terminalNo } </li>
	  					<li class="list-group-item"> 终端机型：${terminal.terminalType } </li>
  						<li class="list-group-item"> 地址：${terminal.address } </li>
	  				</ul>
	  		</div>
	  			<div class="pull-right">
	  				<button id="unbind" type="button" class="btn btn-warning">取消绑定</button>
	  			</div>
	  			<br><br>
     	   	
     	   </c:forEach> -->
  <div class="panel panel-info" ng-app="terminalList" ng-controller="ajaxCtrl">
  	<div class="panel-heading"> 终端信息</div>
		<ul class="list-group">
			<li class="list-group-item" ng-repeat="x in terminals"> 终端编号：{{x.terminalNo}}</li>
			<li class="list-group-item" ng-repeat="x in terminals"> 终端机型：{{x.terminalType}}</li>
			<li class="list-group-item" ng-repeat="x in terminals"> 地址：{{x.address}}</li>
		</ul>
  </div>  		
	<script>
		var app = angular.module('terminalList', []);
		app.controller('ajaxCtrl', function($scope, $http)) {
			$http({
					method:"post",
					url:"bindInfo",
					data:{openid:"${openid}"}
			}).success(function(ret, status) {
				$scope.terminals = ret.terminals;
			}).error(function(ret, status){
				alert("error");
			});
		}
	</script>
  </body>
  
<script type="text/javascript">
  $(function(){
  		$.ajax({
  			url:"bindInfo",
  			type:"POST",
  			dataType:"JSON",
  			data:{openid:"${openid}"},
  			success:function(ret) {
  				for(var i=0; i<ret.terminals.length; i++) {
  					var panel = $("<div class='panel panel-info'></div>");
  	  				var panelHeader = $("<div class='panel-heading'>终端机" + (i+1) +"</div>");
  	  				var panelBody = $("<ul class='list-group'></ul>");
  	  				var terminalNo = $("<li class='list-group-item'>终端编号：" + ret.terminals[i].terminalNo + "</li>");
  	  				var terminalType = $("<li class='list-group-item'>终端机型：" + ret.terminals[i].terminalType + "</li>");
  	  				var address = $("<li class='list-group-item'>地址：" + ret.terminals[i].address + "</li>");
  					panelBody.append(terminalNo);
  					panelBody.append(terminalType);
  					panelBody.append(address);
  					panel.append(panelHeader);
  					panel.append(panelBody);
  					$("#panel").before(panel);
  				}
	  		
  			},
  			error:function(){
  				alert("服务器忙，请重试");
  			}
  		});
  		
  		 $("#test").click(function(){
  			  alert(${openid});	
  		  	});
  	});
 
  </script>
</html>
